import React from 'react';
import HTTP from '../../utils/HTTP';

class Students extends React.Component {
  state = {
    grade: 2
  };

  //返回一个React元素组件
  httpGetComponent() {
    /* <HTTP.Get />组件可以帮助完成数据请求和loading error状态 */
    return (
      <HTTP.Get
        url="http://localhost:8080/getStudents"
        delay="1000"
        loading={
          <tr>
            <td colSpan="3" align="center">
              Data is loading...
            </td>
          </tr>
        }
        error={
          <tr>
            <td colSpan="3" align="center">
              Some error occured!
            </td>
          </tr>
        }
      >
        {/* props.children是一个回调函数，接收请求数据后的参数data */}
        {(data) => {
          return data.map((item) => (
            <tr key={item.id}>
              <td>{item.id}</td>
              <td>{item.name}</td>
              <td>{item.grade}</td>
            </tr>
          ));
        }}
      </HTTP.Get>
    );
  }

  httpPostComponent() {
    return (
      <HTTP.Post
        url="http://localhost:8080/getGradeStudents"
        data={{
          grade: this.state.grade
        }}
        delay="2000"
        loading={
          <tr>
            <td colSpan="3" align="center">
              Data is loading...
            </td>
          </tr>
        }
        error={
          <tr>
            <td colSpan="3" align="center">
              Some error occured!
            </td>
          </tr>
        }
      >
        {(data) => {
          return data.map((item) => (
            <tr key={item.id}>
              <td>{item.id}</td>
              <td>{item.name}</td>
              <td>{item.grade}</td>
            </tr>
          ));
        }}
      </HTTP.Post>
    );
  }

  setInputValue = (e) => {
    this.setState({
      inputValue: e.target.value
    });
  };

  inputSubmit = () => {
    // console.log(this.state);
    //{grade: 2, inputValue: '1'}
    this.setState({
      grade: this.state.inputValue
    });
  };

  render() {
    return (
      <div>
        <h3>Get请求所有学生列表：</h3>
        <table border="1">
          <thead>
            <tr>
              <th>Student ID</th>
              <th>Student Name</th>
              <th>Grade No.</th>
            </tr>
          </thead>
          {/* HTTP.Get or HTTP.Post组件 */}
          <tbody>{this.httpGetComponent()}</tbody>
        </table>
        <hr />
        <h3>Post请求符合grade条件的学生列表：</h3>
        <input
          type="text"
          placeholder="请输入grade的数值(1-3)"
          onChange={this.setInputValue}
        />
        <button onClick={this.inputSubmit}>确定</button>
        <table border="1">
          <thead>
            <tr>
              <th>Student ID</th>
              <th>Student Name</th>
              <th>Grade No.</th>
            </tr>
          </thead>
          {/* HTTP.Get or HTTP.Post组件 */}
          {/* <tbody>{this.httpGetComponent()}</tbody> */}
          <tbody>{this.httpPostComponent()}</tbody>
        </table>
      </div>
    );
  }
}

export default Students;
